<template>
  <view class="batten-box">
    <view class="batten-arc"></view>

    <view class="batten-route-box">
      <view class="batten-route">
        <uni-easy-input
          style-other="margin-bottom: 20rpx;width:90%;margin:0 auto;"
          placeholderStyle="color:#7C6A76;"
          place-holder-color="#7C6A76"
          class="uni-mt-5"
          :styles="styles"
          suffixIcon="search"
          v-model="text"
          placeholder="搜一搜..."
          @iconClick="handleInputClick"
          @focus="handleInputClick"
        />
        <view class="grid_box" v-if="listData && listData.length > 0">
          <view
            class="grid_itme"
            v-for="(listItem, listIndex) in listData"
            :key="listIndex"
            @tap="handleItemClick(listItem.title)"
          >
            <view class="img" :class="listItem.className"></view>
            <text class="grid-text">{{ listItem.title==='荣耀发布' ? '荣耀生活':listItem.title }}</text>
          </view>
        </view>
        <!-- <up-grid :border="false" col="4">
          <up-grid-item
            v-for="(listItem, listIndex) in listData"
            :key="listIndex"
            @tap="handleItemClick(listItem.title)"
          >
            <view class="img" :class="listItem.className"></view>
            <text class="grid-text">{{ listItem.title }}</text>
          </up-grid-item>
        </up-grid> -->
      </view>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import {
  getButtonList,
} from "@/api/index/index.js";
import { ref, defineEmits, onMounted } from "vue";
const emit = defineEmits(["on-click", "on-search", "on-login"]);
import UniEasyInput from "@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import { customNav } from "@/utils/customNav";
import { get1688NavParamsApi } from "@/api/shopping";
import { getCurrentInstance } from "vue";
import {getUserInfoApi} from "@/api/user";
const { proxy } = getCurrentInstance();
const styles = ref({
  color: "#7C6A76",
  backgroundColor: "#7C6A7605",
  borderColor: "#7C6A7630",
});
const text = ref("");
const userLoginInfo = ref("");
const listData = ref([
  // {
  //   className: "honor",
  //   title: "荣誉库",
  // },
  // {
  //   className: "metaverse",
  //   title: "元宇宙",
  // },
  // {
  //   className: "order",
  //   title: "夸父公寓",
  // },
  // {
  //   className: "customer",
  //   title: "政策问答",
  // },

  // {
  //   className: "release",
  //   title: "荣耀发布",
  // },

  // {
  //   className: "classroom",
  //   title: "荣耀课堂",
  // },
  // {
  //   className: "honor-activity",
  //   title: "荣耀活动",
  // },
  // {
  //   className: "honor-task",
  //   title: "荣耀任务",
  // },
  // {
  //   className: "honor-rights",
  //   title: "荣耀权益",
  // },
]);

onMounted(() => {
	getButtonList().then((res) => {
		let arr = []
		res.data.forEach(item => {
			if(item.type == 1) {
				arr.push(item)
			}
		})
		listData.value = arr
	});
})


const handleItemClick = (name) => {
  userLoginInfo.value = uni.getStorageSync("token");
  switch (name) {
    case "荣誉库":
      customNav("/package_honour/pages/honour/index");
      break;
    case "荣耀发布":
      customNav("/package_coupon/pages/list");
      break;
    case "夸父公寓":
      customNav("/package_kuafu_apartment/pages/home/index");
      /*if (!userLoginInfo.value) {
        emit("on-login");
      } else {
        customNav("/package_kuafu_apartment/pages/home/index");
      }*/
      break;
    case "政策问答":
      // customNav("/package_customer_service/pages/customer-service/index");
      customNav("/package_customer_service/pages/customer-service/index_wx");
      // if (!userLoginInfo.value) {
      //   emit("on-login");
      // } else {
      //   // customNav("/package_customer_service/pages/customer-service/index");
      //   customNav("/package_customer_service/pages/customer-service/index_wx");
      // }
      break;
    case "元宇宙":
      proxy.$unity3dGlobal();
      // if (!userLoginInfo.value) {
      //   emit("on-login");
      // } else {
      //   proxy.$unity3dGlobal();
      // }
      break;
    case "荣耀活动":
      customNav("/package_activity/pages/activity/activity-home");
      break;
    case "荣耀任务":
      customNav("/package_task/pages/index");
      /*if (!userLoginInfo.value) {
        emit("on-login");
      } else {
        customNav("/package_task/pages/index");
      }*/
      break;
    case "荣耀权益":
      get1688NavParams();
      break;
    case "荣耀课堂":
      customNav("/package_classroom/pages/s");
      /*getUserInfoApi().then((res) => {
        console.log('>>>>>>>>>>>',res)
      })*/
      // customNav("/package_games/pages/index");
      break;
    default:
      break;
  }
};

const get1688NavParams = async () => {
  const res = await get1688NavParamsApi();
  const { code, data } = res;
  if (code === 200) {
    console.log("测试半瓶跳转参数code", data.code);
    // #ifdef H5 || APP-PLUS
    uni.navigateToMiniProgram({
      appId: "wx90337e70657a6d17",
      path: "pages/index/index",
      envVersion: "release",
      extraData: {
        authCode: data.code,
        mobile: data.phone,
      },
    });
    // #end
    // #ifdef  MP-WEIXIN
    // uni.openEmbeddedMiniProgram({
    uni.navigateToMiniProgram({
      appId: "wx90337e70657a6d17",
      path: "pages/index/index",
      envVersion: "release",
      extraData: {
        authCode: data.code,
        mobile: data.phone,
      },
    });
    // #end
  }
};

function handleInputClick() {
  customNav("/pages/index/unify");
}

const toXiShuaShuaMiniProgram = async () => {
  uni.navigateToMiniProgram({
    appId: "wx1896e306544e975f"
  })
}
</script>

<style lang="less">
.batten-box {
  position: relative;
  width: 100vw;
  height: 800rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: @batten-img;

  .batten-arc {
    width: 100%;
    height: 100rpx;
    background: @batten-arc-img no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 0;
  }
  .batten-route-box {
    width: 96vw;
    margin: 0 auto;
    position: absolute;
    bottom: -200rpx;
    left: 50%;
    transform: translate(-50%);

    .batten-route {
      width: 716rpx;
      padding: 30rpx 0 45rpx;
      box-sizing: border-box;
      border-radius: 33rpx;
      background-color: #ffffff;
      .grid_box {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        .grid_itme {
          width: 179rpx;
          display: flex;
          flex-flow: column wrap;
          justify-content: center;
          align-items: center;
        }
      }
      .img {
        width: 70rpx;
        height: 70rpx;
        background-position-x: center;
        margin-top: 50rpx;
        // 荣耀联盟
        &.union {
          background: @card-union-img no-repeat;
          background-size: 100% 100%;
        }
        // // 荣耀任务
        &.honor-task {
          background: @card-honor-task-img no-repeat;
          background-size: 100% 100%;
        }

        &.honor-activity {
          background: @card-honor-activity-img no-repeat;
          background-size: 100% 100%;
        }
        &.honor-rights {
          background: @card-honor-rights-img no-repeat;
          background-size: 100% 100%;
        }

        &.apartment {
          background: @card-apartment-img no-repeat;
          background-size: 100% 100%;
        }

        // 元宇宙
        &.metaverse {
          background: @card-metaverse-img no-repeat;
          background-size: 100% 100%;
        }

        // 荣誉库
        &.honor {
          background: @card-honor-img no-repeat;
          background-size: 100% 100%;
        }

        // 相互帮
        &.assistance {
          background: @card-assistance-img no-repeat;
          background-size: 100% 100%;
        }

        // 智能客服
        &.customer {
          background: @card-customer-img no-repeat;
          background-size: 100% 100%;
        }

        // 荣耀活动
        &.activity {
          background: @card-activity-img no-repeat;
          background-size: 100% 100%;
        }

        // 荣耀课堂
        &.classroom {
          background: @card-classroom-img no-repeat;
          background-size: 100% 100%;
        }

        // 夸父公寓
        &.order {
          background: @card-order-img no-repeat;
          background-size: 100% 100%;
        }

        // 荣耀发布
        &.release {
          background: @card-release-img no-repeat;
          background-size: 100% 100%;
        }

        // 查看全部
        &.whole {
          background: @card-whole-img no-repeat;
          background-size: 100% 100%;
        }

        // 设计类
        &.design {
          background: @card-design-img no-repeat;
          background-size: 100% 100%;
        }

        // 开发类
        &.develop {
          background: @card-develop-img no-repeat;
          background-size: 100% 100%;
        }

        // 营销类
        &.marketing {
          background: @card-marketing-img no-repeat;
          background-size: 100% 100%;
        }

        // 咨询类
        &.advice {
          background: @card-advice-img no-repeat;
          background-size: 100% 100%;
        }

        // 其他
        &.other {
          background: @card-other-img no-repeat;
          background-size: 100% 100%;
        }

        // 待使用
        &.operate {
          background: @card-operate-img no-repeat;
          background-size: 100% 100%;
        }

        // 待提货
        &.take {
          background: @card-take-img no-repeat;
          background-size: 100% 100%;
        }

        // 已完成
        &.completed {
          background: @card-completed-img no-repeat;
          background-size: 100% 100%;
        }

        // 加入企业
        &.join {
          background: @card-join-img no-repeat;
          background-size: 100% 100%;
        }

        // 意见反馈
        &.opinion {
          background: @card-opinion-img no-repeat;
          background-size: 100% 100%;
        }

        // 帮助与客服
        &.help {
          background: @card-help-img no-repeat;
          background-size: 100% 100%;
        }

        // 实名认证
        &.realname {
          background: @card-realName-img no-repeat;
          background-size: 100% 100%;
        }
      }

      .grid-text {
        font-family: "ali-p";
        font-weight: 500;
        font-size: 23rpx;
        color: @color-black-text;
      }
    }
  }
}
</style>
